<style lang="scss" scoped>
  @import '../../styles/common/loading.less';
  .container{
    border: none !important;
    margin-top: 4px;
  }
  .el-col-offset-1 {
    margin-left: 0%;
  }
  .button_a {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);

  }
  .col_a {
    margin-left: 2%;
  }
  .el-card {
    height: 200px;
  }

  .el-button--primary {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);
  }
</style>
<template>
    <div  class="common-background-color"
          v-loading="loading"
          element-loading-text="loading......"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)">
      <div style="width:98%;height:85%;margin: 36px 12px;margin-right: 50px;">
              <el-collapse v-model="activeNames">
                <el-collapse-item title="结算汇总信息"  name="1">
                    <el-form :model="prpLSettlementDTO" class="info-submit-form">
                        <el-row type="flex">
                            <el-col :span="8">
                                <el-form-item label="医疗机构名称">
                                    <el-input v-model="prpLSettlementDTO.hospName" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="结算笔数">
                                    <el-input v-model="prpLSettlementDTO.settleNum"  disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="医疗费用总额">
                                    <el-input v-model="prpLSettlementDTO.medicalFeeAmount" disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row type="flex">
                            <el-col :span="8">
                                <el-form-item label="扣款金额">
                                    <el-input v-model="prpLSettlementDTO.deductionAmount"  disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="应补金额">
                                    <el-input v-model="prpLSettlementDTO.supplementAmount" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="实际支付金额">
                                    <el-input v-model="prpLSettlementDTO.actualPaymentAmount"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-collapse-item>
              </el-collapse>
              <el-collapse  v-model="activeNames">
                <el-collapse-item title="账号信息"  name="2">
                  <el-form :model="prpLPayee" class="info-submit-form"> 
                    <!--                        第1行-->
                    <el-row type="flex" >
                      <el-col :span="8">
                        <el-form-item label="领款人姓名"  :required="true">
                          <el-input  style="margin-top: 5px" v-model="prpLPayee.payeeName" placeholder="">
                            <el-button slot="append" @click="accountDialogVisible = true" icon="el-icon-search"></el-button>
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="支付对象"  :required="true">
                            <el-select placeholder="请选择" v-model="prpLPayee.payObject" >
                                <el-option
                                v-for="item in payObjectList"
                                :key="item.codeCode"
                                :label="item.codeCName"
                                :value="item.codeCode">
                                </el-option>
                            </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" >
                        <el-form-item label="联系电话"  :required="true">
                            <el-input   v-model="prpLPayee.phone"  placeholder=""></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <!--                        第2行-->
                    <el-row type="flex">
                      <el-col :span="8" >
                        <el-form-item label="证件类型"  :required="true">
                          <el-select  placeholder="请选择" v-model="prpLPayee.identifyType" >
                            <el-option
                              v-for="item in identifyTypeList"
                              :key="item.codeCode"
                              :label="item.codeCName"
                              :value="item.codeCode">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8"  >
                        <el-form-item label="证件号码"  :required="true">
                          <el-input v-model="prpLPayee.identifyNo"   placeholder=""></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="收款银行大类" :required="true">
                            <el-select placeholder="请选择" v-model="prpLPayee.bankBroad" >
                                <el-option
                                v-for="item in bankBroadList"
                                :key="item.directCode"
                                :label="item.directName"
                                :value="item.directCode">
                                </el-option>
                            </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <!--                        第3行-->
                    <el-row type="flex">
                      <el-col :span="8" >
                        <el-form-item label="开户行省" prop="province">
                            <el-select placeholder="请选择省份" v-model="selectProvince" filterable size="mini"  @change="selectProvinceFun($event)" >
                                <el-option value="" label="请选择"></el-option>
                                <el-option :value="item" :label="item.label" v-for="(item, index) in provinceList" :key="index"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8"  >
                        <el-form-item label="开户行市" prop="area">
                          <el-select placeholder="请选择城市" v-model="selectCity" filterable size="mini" @change="selectCityFun($event)" >
                            <el-option value="" label="请选择"></el-option>
                            <el-option :value="item" :label="item.label" v-for="(item, index) in cityList" :key="index"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="开户行区/县" prop="city">
                            <el-select placeholder="请选择区县" v-model="selectDistrict" filterable size="mini"  @change="selectDistrictFun($event)" >
                                <el-option value="" label="请选择"></el-option>
                                <el-option :value="item" :label="item.label" v-for="(item, index) in districtList" :key="index"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                     <!--                        第4行-->  
                    <el-row type="flex">
                      <el-col :span="8" >
                        <el-form-item label="对公对私"  :required="true">
                          <el-select  placeholder="请选择" v-model="prpLPayee.bankToPubPri" >
                            <el-option
                              v-for="item in pubPriList"
                              :key="item.codeCode"
                              :label="item.codeCName"
                              :value="item.codeCode">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" >
                        <el-form-item label="开户银行" :required="true">
                          <el-input  v-model="prpLPayee.bankName"  placeholder=""></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="银行账号"  :required="true">
                          <el-input  v-model="prpLPayee.bankNo"     placeholder=""></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <!--                        第5行-->
                    <el-row type="flex">
                      <el-col :span="8"  >
                        <el-form-item label="银行地址" :required="true">
                          <el-input   v-model="prpLPayee.bankAddress"  placeholder=""></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" >
                        <el-form-item label="赔款金额"  :required="true">
                          <el-input  v-model="prpLPayee.payAmount"     placeholder=""></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" >
                        <el-form-item label="赔款摘要"  :required="true">
                          <el-input  v-model="prpLPayee.remark"     placeholder=""></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </el-collapse-item>
              </el-collapse>
      </div>
      <!-- 编辑弹出框 -->
      <el-dialog
        title="结算单明细"
        :visible.sync="centerDialogVisible" append-to-body
        width="70%"
        center>
        <div>
          <template>
            <el-table
              :data="settleCaseInfoList"
              class="table"
              ref="multipleTable"
              header-cell-class-name="table-header"
              style="margin-top: 30px" 
            >
              <el-table-column prop="caseNo" label="大病赔案号" align="center">
                <template  slot-scope="scope">
                  <a href="#">{{scope.row.caseNo}}</a>
                </template>
              </el-table-column>
              <el-table-column prop="medicalType" label="医疗类别" align="center"></el-table-column>
              <el-table-column prop="sumAmount" label="医疗费用金额" align="center"></el-table-column>
              <el-table-column prop="undwrtDate" label="核赔日期" align="center"></el-table-column>
              <el-table-column prop="sumPayAmount" label="实际支付金额" align="center"></el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="1">
              </el-pagination>
            </div>
          </template>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="info" @click="centerDialogVisible = false">关  闭</el-button>
        </div>
      </el-dialog>
     
      <!-- 账号选择弹框 -->
      <el-dialog
        title="账户选择"
        :visible.sync="accountDialogVisible"
        class="class_c"
        width="60%"
        center>
        <div>
          <template>
            <div>
              <div class="crumbs">
                <div style="margin:10px;font-family: 'MicrosoftYaHei-Bold', '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
            font-weight: 700;
            font-style: normal;
            font-size: 14px;
            line-height: 22px;">账户信息查询
                </div>
              </div>
              <div class="container">
                <div>
                  <el-form :model="prplPayeeList" ref="prplPayeeList">

                    <el-row type="flex">
                      <el-col :span="8">
                        <el-form-item label="领款人姓名" prop="payeeName">
                          <el-input placeholder="请输入领款人名称"  v-model="prplPayeeList.payeeName"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="证件号码" prop="identifyNo">
                          <el-input placeholder="请输入证件号" v-model="prplPayeeList.identifyNo"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="银行账户后六位" prop="bankNo">
                          <el-input placeholder="请输入账户后六位"  v-model="prplPayeeList.bankNo"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <div class="select-btn-group">
                          <el-button type="primary" size="medium"  @click="queryAccountList">查询</el-button>
                          <el-button type="primary" size="medium" @click="resetForm('prplPayeeList')">重置</el-button>
                        </div>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
                <el-table
                  :data="prplPayeeData"
                  class="table"
                  ref="multipleTable"
                  header-cell-class-name="table-header"
                  style="margin-top: 10px"
                >
                  <el-table-column type="index" label="序号" width="55px" align="center"></el-table-column>
                  <el-table-column prop="payeeName" label="领款人名称" align="center"></el-table-column>
                  <el-table-column prop="identifyNo" label="证件号码" align="center"></el-table-column>
                  <el-table-column prop="bankNo" label="银行账号" align="center"></el-table-column>
                  <el-table-column prop="bankName" label="开户银行" align="center"></el-table-column>
                  <el-table-column prop="bankToPubPri" label="对公对私" align="center"></el-table-column>
                  <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
                  <el-table-column label="操作栏" align="center" show-overflow-tooltip width="200px">
                    <template slot-scope="scope">
                      <el-button type="text" @click="showDetails(scope.row)">选定</el-button>
                    </template>
                  </el-table-column>


                </el-table>
                <div class="pagination">
                  <el-pagination :current-page="accpagination.currentPage" :page-size="accpagination.rowsNumber"
                                :total="accpagination.totalPage" background layout="prev, pager, next,total,jumper"
                                  @current-change="accQueryFun">
                  </el-pagination>
                </div>
                <!--关闭按钮-->
                <div style="margin-left: 45%">
                  <el-button type="primary" @click="accountDialogVisible = false"
                              style="line-height:10px;height: 35px;width: 100px;text-align: center;margin: 10px 0px 0px 0px;">
                    返回
                  </el-button>
                </div>

              </div>
            </div>
          </template>
        </div>
      </el-dialog>


      <div style="margin: 40px;padding-bottom: 50px;margin-left: 35%;">
          <el-button type="primary" size="medium" style=" background-color:rgba(255, 138, 0, 1);
          border-color:rgba(255, 138, 0, 1);">重置</el-button>
          <el-button type="danger"  size="medium" @click="centerDialogVisible=true" style=" background-color:rgba(255, 138, 0, 1);
          border-color:rgba(255, 138, 0, 1);">结算单明细</el-button>
          <el-button type="success" size="medium" v-on:click="onSubmit" style=" background-color:rgba(255, 138, 0, 1);
          border-color:rgba(255, 138, 0, 1);">提交</el-button>
          <el-button type="info" size="medium" @click="handleClose" style=" background-color:rgba(255, 138, 0, 1);
          border-color:rgba(255, 138, 0, 1);">关闭</el-button>
      </div>
    </div>
</template>

<script>
import util from '@/libs/util';
import{queryCodeList,queryBankClassList,queryBankInfo,queryBankRegionInfo,queryRegionTree,submitSettlement,querySettlementDetail,querySettleCaseInfo,queryAccountListByPage}from '@/api/baseDate';
//import Cookies from 'js-cookie';
import moment, { relativeTimeRounding } from 'moment';
export default {
    name: 'settlementTaskDetailCache',
    data() {
        return {
            loading:false,
            activeNames: ['1','2'],
            centerDialogVisible:false, // 结算单明细
            accountDialogVisible:false, // 账户选择弹框
            data:{
                prpLPayee:{}
            },
            prpLSettlementDTO: {},
            prpLPayee:{},
            settleCaseInfoList:[],
            prpLClaimOpinionDTO:{},
            selectProvince: {},
            selectCity: {},
            selectDistrict: {},
            bankProvince:'', // 省
            bankCity:'', // 市
            bankDistrict:'',  // 区
            isAccount:false,
            payObjectList:[],
            identifyTypeList:[],
            bankBroadList:[],
            provinceList:[],
            cityList:[],
            districtList:[],
            pubPriList:[ // 
                {
                    codeCode:"1",
                    codeCName:"对公",
                },
                {
                    codeCode:"2",
                    codeCName:"对私",
                }
            ],
            pagination: {
              currentPage: 1, // 当前页
              rowsNumber: 10, // 每页条数
              totalPage: 0 // 总条数
            },
            //账户查询分页
            accpagination: {
              currentPage: 1, // 当前页
              rowsNumber: 5, // 每页条数
              totalPage: 0 // 总条数
            },
            prplPayeeList:{},
            prplPayeeData:[],
        };
    },
    created() {
        this.getParams();
        this.queryPayObjectList();
        this.queryIdentifyTypeList();
        this.queryBankBroadList();
        this.queryRegionList();
    },
    methods: {
        handleSizeChange(pageSize){ // 改变当前页条数事件
            let pageIndex = this.pagination.currentPage;
            this.queryTaskList(pageIndex,pageSize);
        },
        queryFun(pageNum){ // 改变当前页事件
            let rowsNumber = this.pagination.rowsNumber;
            this.queryTaskList(pageNum,rowsNumber);
        },
        costSumInfo(){
            this.isAccount=!this.isAccount;
        },
        onSubmit() {
            this.data=this.prpLSettlementDTO;
            this.prpLPayee.bankProvince = this.bankProvince;
            this.prpLPayee.bankCity = this.bankCity;
            this.prpLPayee.bankDistrict = this.bankDistrict;
            this.data.settleCaseInfoList = this.settleCaseInfoList;
            this.data.prpLPayee = this.prpLPayee;
            this.data.taskState = '03';
            this.data.prpLClaimOpinionDTO = this.prpLClaimOpinionDTO;
            this.loading = true;
            submitSettlement(this.data)
                            .then(res => {
                                this.loading = false;
                                if(res){
                                  if(res.data.resultCode){
                                      if(res.data.resultCode != '0000'){ 
                                          // 返回失败
                                          this.$message.error(res.data.resultMsg);
                                      }else{
                                          this.$message.success(res.data.resultMsg+',结算单号:'+res.data.settleNo);
                                          this.prpLSettlementDTO.id = res.data.taskId;
                                          this.closePageTo(this.$store,this.$route,this.$router,'settlementTask');
                                      }
                                  }else{
                                      this.$message.error('系统异常'); 
                                  }
                                }else{
                                  this.$message.error('系统异常'); 
                                }
                            })

        },
        getParams(){
            let taskId  = this.$route.params.taskId;
            if(taskId == null || taskId == undefined || taskId == ''){
                this.prpLSettlementDTO = {
                    comCode: this.$route.params.comCode,
                    comName: this.$route.params.comName,
                    hospName: this.$route.params.hospName,
                    hospCode: this.$route.params.hospCode,
                    isReopen: this.$route.params.isReopen,
                    settleNum: this.$route.params.settleNum,
                    medicalFeeAmount: this.$route.params.medicalFeeAmount,
                    deductionAmount: this.$route.params.deductionAmount,
                    supplementAmount: this.$route.params.supplementAmount,
                    actualPaymentAmount: this.$route.params.actualPaymentAmount
                    
                }
                this.settleCaseInfoList = this.$route.params.settleCaseInfoList;
            }else{
                let settleNo  = this.$route.params.settleNo;
                this.querySettleDetail(taskId,settleNo);
            } 
        },
        querySettleDetail(taskId,settleNo){
            const param = {
                id: taskId,
                settleNo: settleNo
            }
            querySettlementDetail(param).then((res)=> {
                              if(res){
                                if(res.data.resultCode){
                                    if(res.data.resultCode != '0000'){ 
                                        // 返回失败
                                        this.$message.error(res.data.resultMsg);
                                    }else{
                                        this.settleCaseInfoList = res.data.settleCaseInfoList;
                                        this.prpLSettlementDTO = res.data;
                                    }
                                }else{
                                    this.$message.error('系统异常'); 
                                }
                              }else{
                                this.$message.error('系统异常'); 
                              }

            });
        },
        queryPayObjectList(){
            const param = {
                codeType:'PayObject'
            }
            queryCodeList(param).then(res=> {
                this.payObjectList = res.data
            })
        },
        queryIdentifyTypeList(){
            const param = {
                codeType:'IdentifyType'
            }
            queryCodeList(param).then(res=> {
                this.identifyTypeList = res.data
            })

        },
        queryBankBroadList(){
            debugger;
            queryBankClassList('').then(res=> {
                this.bankBroadList = res.data
            })
        },
        queryRegionList(){
            const param = { 
                value:'value',
                lable:'label'
            }
            queryRegionTree(param).then(res=> {
                this.provinceList = res.data
            })
        },
        // 省份 市 县联动
        selectProvinceFun (event) {
            console.log(event)
            if (event) {
                this.cityList = event.children
            } else {
                this.cityList = []
            }
            this.districtList = []
            this.$emit('getLawyerListInfo', [event.label, 'province'])
            this.selectDistrict = {};
            if (event.value === undefined) {
                this.bankProvince = "";
            } else {
                this.bankProvince = event.value;
            }
        },
        selectCityFun (event) {
            console.log(event)
            if (event) {
                this.districtList = event.children
            } else {
                this.districtList = []
            }
            this.$emit('getLawyerListInfo', [event.label, 'city'])
            if (event.value === undefined) {
                this.bankCity = "";
            } else {
                this.bankCity = event.value;
            }
        },
        selectDistrictFun (event) {
            console.log(event)
            this.$emit('getLawyerListInfo', [event.label, 'area'])
            if (event.value === undefined) {
                this.bankDistrict = "";
            } else {
                this.bankDistrict = event.value;
            }
        },
        //账户信息分页
        accQueryFun(pageNum){ // 改变当前页事件
          this.accpagination.currentPage=pageNum
          this.queryAccountList();
        },
        // 查询账户信息列表
        queryAccountList(){
            queryAccountListByPage({
              "bankNo":this.prplPayeeList.bankNo,
              "identifyNo":this.prplPayeeList.identifyNo,
              "payeeName":this.prplPayeeList.payeeName,
              "pageNum":this.accpagination.currentPage,
              "pageSize":this.accpagination.rowsNumber,
            }).then(res => {
              this.prplPayeeData = res.data.list;
              this.accpagination.totalPage = res.data.total;;
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        showDetails(row){
            this.accountDialogVisible = false;
            this.prpLPayee = row;
            this.selectProvince.value = row.bankProvince;
            this.bankProvince = row.bankProvince;
            this.bankCity = row.bankCity;
            this.bankDistrict = row.bankDistrict;
            this.queryRegionList();
        },
        handleClose(){
            this.closePageTo(this.$store,this.$route,this.$router,'settlementTask');
        }
    },
    mounted(){
        window.addEventListener('load', () => {
            this.closePageTo(this.$store,this.$route,this.$router);
        })
    }
};
</script>